<template>
  <div class="p-3">
    <d-table
      ref="table"
      row-key="dictId"
      :params="formData"
      :columns="columns"
      api="system/dict/type/list"
      :hasColumnControl="false"
    >
      <template #topContent>
        <t-form class="table-form" :data="formData" layout="inline" @submit="getData">
          <t-form-item label="字典名称">
            <t-input v-model="formData.dictName" placeholder="请输入字典名称" clearable></t-input>
          </t-form-item>
          <t-form-item label="字典类型">
            <t-input v-model="formData.dictType" placeholder="请输入字典类型" clearable></t-input>
          </t-form-item>
          <t-form-item label="状态">
            <t-select
              v-model="formData.status"
              placeholder="字典状态"
              :options="statusList"
              clearable
            >
            </t-select>
          </t-form-item>
          <t-form-item label="创建时间">
            <d-range-picker
              allow-input
              clearable
              v-model:beginTime="formData.beginTime"
              v-model:endTime="formData.endTime"
            />
          </t-form-item>
          <t-button type="submit">搜索</t-button>
          <t-button v-auth="'system:dict:add'" class="ml-3" @click="handleEdit()"
            >新增字典</t-button
          >
          <t-button theme="default" v-auth="'system:dict:add'" class="ml-3" @click="handleCache()"
            >刷新缓存</t-button
          >
        </t-form>
      </template>
      <template #operation="{ row }">
        <t-link v-auth="'system:dict:edit'" theme="primary" hover="color" @click="handleEdit(row)">
          编辑
        </t-link>
        <t-link
          class="ml-2"
          v-auth="'system:dict:edit'"
          theme="primary"
          hover="color"
          @click="handleData(row)"
        >
          字典数据
        </t-link>
        <d-pop-btn
          v-auth="'system:dict:remove'"
          class="ml-2"
          tips="是否确认删除该字典？"
          @click="handleDel(row)"
          >删除</d-pop-btn
        >
      </template>
    </d-table>
    <add ref="dialog" @success="getData" />
  </div>
</template>

<script setup lang="jsx">
import add from './add.vue'
import { ref, computed } from 'vue'
import { del } from '@common'
import { useDict } from '@/store/dict'
import { MessagePlugin } from 'tdesign-vue-next'
import { useRouter } from 'vue-router'
const table = ref(null)
const formData = ref({ status: '0' })
const dialog = ref(false)
const dict = useDict()
const statusList = computed(() => {
  return dict.dict_enable_list
})
const router = useRouter()
const columns = computed(() => {
  return [
    { title: '序号', colKey: 'dIndex', width: 60 },
    {
      title: '字典名称',
      colKey: 'dictName',
      width: 120,
      ellipsis: true
    },
    { title: '字典类型', colKey: 'dictType', width: 200, ellipsis: true },
    {
      title: '状态',
      colKey: 'status',
      width: 80,
      cell: (_, { row }) => {
        const { status } = row
        return <d-status list={statusList.value} value={status} />
      }
    },
    { title: '备注', colKey: 'remark', width: 160, ellipsis: true },
    { title: '创建时间', colKey: 'createTime', width: 170 },
    { title: '操作', colKey: 'operation', width: 120 }
  ]
})
const getData = async () => {
  table.value.getData()
}
const handleEdit = (row) => {
  dialog.value.show(row)
}
const handleCache = async () => {
  await del('system/dict/type/refreshCache')
}
const handleDel = async (item) => {
  await del(`system/dict/type/${item.dictId}`)
  MessagePlugin.success('删除成功')
  getData()
}
const handleData = (row) => {
  router.push({
    path: '/system/dict/sub',
    query: {
      dictType: row.dictType
    }
  })
}
</script>
